<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title th:text="${setInfo.nickName}+'的主页'">用户主页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <th:block th:include="common/link::link"></th:block>
    <script src="../static/echarts/echarts.min.js"></script>
    <script src="http://echarts.baidu.com/resource/echarts-gl-latest/dist/echarts-gl.min.js"></script>
    <script src="../static/js/jquery.min.js"></script>
    <script src="../static/echarts//dat.gui.js"></script>
    <link href="../static/eb/subject.css" rel="stylesheet" type="text/css">
    <script src="../static/iconfont/social.js"></script>

    <style type="text/css">
        .icon {
            /* 通过设置 font-size 来改变图标大小 */
            width: 22px;
            height: 22px;
            /* 图标和文字相邻时，垂直对齐 */
            vertical-align: -0.15em;
            /* 通过设置 color 来改变 SVG 的颜色/fill */
            fill: currentColor;
            /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
               normalize.css 中也包含这行 */
            overflow: hidden;
        }

    </style>
    <style>
        #echart {
            position: absolute;
            width: 600px;
            height: 200px;
        }

        .top-info {
            width: 1080px;
            margin: 0 auto 15px;
        }
    </style>
</head>

<body style="margin-top: 65px;">

<div class="header">
    <th:block th:include="common/header::header"></th:block>
</div>
<div class="layui-fluid">
    <div class="top-info layui-clear">
        <div class="layui-row ">
            <div class="layui-col-sm3">
                <div class="fly-home">
                    <img th:src="${setInfo.avatar}" th:alt="${setInfo.nickName}">
                    <p class="fly-home-info" style="margin-top: 5px">
                        <th:block th:if="${github}">
                            <a th:href="${github.socialUrl}">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-GitHub"></use>
                                </svg>
                            </a>
                        </th:block>
                        <th:block th:if="${zhihu}">
                            <a th:href="${zhihu.socialUrl}">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-zhihu"></use>
                                </svg>
                            </a>
                        </th:block>
                        <th:block th:if="${weibo}">
                            <a th:href="${weibo.socialUrl}">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-weibo"></use>
                                </svg>
                            </a>
                        </th:block>
                        <th:block th:if="${linkin}">
                            <a th:href="${linkin.socialUrl}">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-linkedin"></use>
                                </svg>
                            </a>
                        </th:block>


                        <!-- <i class="iconfont icon-zuichun" title="声望"></i><span style="color: #FF7200;">67206</span>
                         <i class="iconfont icon-chengshi"></i><span th:text="${setInfo.city}">上海</span>-->
                    </p>
                </div>

            </div>
            <div class="layui-col-sm4">
                <ul style="padding-top: 20px">
                    <li>
                        <i class="fa fa-user-o fa-fw"></i>
                        <span style="font-size: 20px;" th:text="${setInfo.nickName}"></span>
                    </li>
                    <li>
                        <i class="fa fa-diamond fa-fw"></i>
                        <span th:text="${fame.fameName}">wwdas</span>
                    </li>
                    <th:block th:if="${not #strings.isEmpty(setInfo.city)}">
                        <li>
                            <i class="fa fa-map-marker fa-fw"></i>
                            <span th:text="${setInfo.city}">上海</span>
                        </li>
                    </th:block>

                    <th:block th:if="${not #strings.isEmpty(setInfo.company)}">
                        <li>
                            <i class="fa fa-building fa-fw"></i>
                            <span th:text="${setInfo.company}">wwdas</span>
                        </li>
                    </th:block>

                </ul>

            </div>
            <div class="layui-col-sm5">

                <fieldset class="layui-elem-field" style="margin-top: 20px; max-width: 540px;min-height: 150px">
                    <legend>自我宣言</legend>
                    <div class="layui-field-box" th:text="${setInfo.sign}">
                        我们有一种天生的惰性，总想着吃最少的苦，走最短的弯路，获得最大的收益。但是，很多事情，别人可以替你做却无法替你感受，缺少了这一段心路历程，你即使再成功，精神的田地里依然是一片荒芜。
                    </div>
                </fieldset>

            </div>
        </div>
    </div>
    <div class="main layui-clear">
        <div class="wrap">
            <div class="content">


                <!--<div class="fly-none" style="min-height: 50px; padding:30px 0; height:auto;"><i style="font-size:14px;">没有发表任何求解</i></div>-->


                <div class="fly-panel leifeng-rank">
                    <h3 class="fly-panel-title">数据展示</h3>

                    <div class="layui-row">
                        <div class="layui-col-md5">
                            <div id="bing" style="width: 100%;height: 300px;border-right: dashed 1px;"></div>
                        </div>
                        <div class="layui-col-md7">
                            <div id="echart" style="width: 100%;height: 300px;"></div>
                        </div>
                    </div>

                </div>

                <div class="fly-panel leifeng-rank">
                    <h3 class="fly-panel-title">作者主题</h3>

                    <ul class="archive-list"
                        style="border:none; background:#ffffff;" id="ebook-list">

                    </ul>
                </div>

            </div>
        </div>

        <div class="edge">
            <th:block th:if="${not #lists.isEmpty(sourceList)}">
                <div class="fly-panel">
                    <h3 class="fly-panel-title">开源项目</h3>
                    <ul class="jie-row">
                        <th:block th:each="os,index:${sourceList}">
                            <li>
                                <a href="#" class="jie-title" th:text="${os.account}">spring-cloud-microservice</a>
                                <em>
                                    <iframe style="margin-left: 1px; margin-bottom:-5px;"
                                            frameborder="0" scrolling="0" width="80px" height="20px"
                                            th:src="@{'https://ghbtns.com/github-btn.html?user=' + ${os.osName} + '&repo='+ ${os.account}+'&type=star&count=true'}"
                                            src="https://ghbtns.com/github-btn.html?user=flyhero&repo=spring-cloud-microservice&type=star&count=true">
                                    </iframe>
                                    <iframe style="margin-left: 1px; margin-bottom:-5px;"
                                            frameborder="0" scrolling="0" width="80px" height="20px"
                                            th:src="@{'https://ghbtns.com/github-btn.html?user=' + ${os.osName} + '&repo='+ ${os.account}+'&type=fork&count=true'}"
                                            src="https://ghbtns.com/github-btn.html?user=flyhero&repo=spring-cloud-microservice&type=fork&count=true">
                                    </iframe>
                                </em>
                            </li>
                        </th:block>
                    </ul>
                </div>
            </th:block>
            <th:block th:if="${not #lists.isEmpty(hotArticleList)}">
                <div class="fly-panel fly-list-one">
                    <h3 class="fly-panel-title">热门阅读</h3>
                    <dl>

                        <th:block th:each="hot,index:${hotArticleList}">
                            <dd>
                                <a href="#" th:href="@{${rootPath} + '/article/detail/'+${hot.articleId}}"
                                   th:text="${hot.title}">标题</a>
                                <span><i class="fa fa-eye fa-fw"></i><span th:text="${hot.viewNum}"></span></span>
                            </dd>
                        </th:block>
                    </dl>
                </div>
            </th:block>
            <th:block th:if="${not #lists.isEmpty(lastArticleList)}">
                <div class="fly-panel fly-list-one">
                    <h3 class="fly-panel-title">最新文章</h3>
                    <dl>
                        <th:block th:each="last,index:${lastArticleList}">
                            <dd>
                                <a href="/#" th:href="@{${rootPath} + '/article/detail/'+${last.articleId}}"
                                   th:text="${last.title}">标题</a>
                                <span><i class="fa fa-clock-o fa-fw"></i> <span
                                        th:text="${#dates.format(last.createTime, 'hh:mm')}"></span></span>
                            </dd>
                        </th:block>
                    </dl>
                </div>
            </th:block>
            <div class="fly-panel fly-link">
                <h3 class="fly-panel-title">注册与浏览</h3>
                <dl>
                    <dd>
                        <i class="iconfont icon-shijian"></i><span
                            th:text="'注册于：'+${#dates.format(setInfo.createTime, 'yyyy年MM月dd日')}"> 注册于 2016年09月04日</span>
                    </dd>
                    <!--<dd>
                        <a href="#" target="_blank">个人主页被 5.3k 人浏览</a>
                    </dd>-->
                </dl>
            </div>
        </div>
    </div>

</div>

<th:block th:replace="common/footer::footer"></th:block>

<script th:inline="javascript">
    var actives = [[${activeVos}]];
    var levelVos = [[${levelVos}]];
    if(levelVos.length == 0){
        levelVos =[
            {value:0, name:'1k-'}
        ]
    }

    var bing = echarts.init(document.getElementById('bing'));
    var chart = echarts.init(document.getElementById('echart'));

    function dateFormat(date) {

// 获取当前月份
        var nowMonth = date.getMonth() + 1;

// 获取当前是几号
        var strDate = date.getDate();

// 添加分隔符“-”
        var seperator = "/";

// 对月份进行处理，1-9月在前面添加一个“0”
        if (nowMonth >= 1 && nowMonth <= 9) {
            nowMonth = "0" + nowMonth;
        }

// 对月份进行处理，1-9号在前面添加一个“0”
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }

// 最后拼接字符串，得到一个格式为(yyyy-MM-dd)的日期
        var nowDate = date.getFullYear() + seperator + nowMonth + seperator + strDate;
        return nowDate;
    }

    function getVirtulData(year) {
        year = year || '2017';
        var date = +echarts.number.parseDate(year + '-01-01');
        var end = +echarts.number.parseDate((+year + 1) + '-01-01');
        var dayTime = 3600 * 24 * 1000;
        var data = [];
        for (var time = date; time < end; time += dayTime) {
            console.log(time);
            data.push([
                echarts.format.formatTime('yyyy-MM-dd', time),
                Math.floor(Math.random() * 1000)
            ]);
        }
        return data;
    }

    function getVirtulData1(startDate, endDate) {
        var date = +echarts.number.parseDate(startDate);
        var end = +echarts.number.parseDate(endDate);
        var dayTime = 3600 * 24 * 1000;
        var data = [];
        /*
            for (var time = date; time < end; time += dayTime) {
        */

        for (index in actives) {//遍历json数组时，这么写p为索引，0,1

            //console.log(actives[index].sumScore + " " + actives[index].activeDate);

            data.push([
                actives[index].activeDate,
                actives[index].sumScore
            ]);
        }
        /*        console.log(dateFormat(new Date(time)));

                data.push([
                    dateFormat(new Date(time)),
                    Math.floor(Math.random() * 1000)
                ]);
            }*/
        return data;
    }

    var nowDate = new Date();
    var endDate = dateFormat(nowDate);
    nowDate.setMonth(nowDate.getMonth() - 6);
    var startDate = dateFormat(nowDate);


    option = {
        title: {
            text: '活跃图',
            /*  subtext: '数据纯属虚构',*/
            left: 'center'
        },
        tooltip: {
            position: 'top',
            formatter: function (params) {
                return params.value[0] + ' : ' + params.value[1];
            }
        },
        visualMap: {
            min: 0,
            max: 100,
            calculable: true,
            orient: 'horizontal',
            left: 'center',
            bottom: 30
        },

        calendar: [
            {
                range: [startDate, endDate],
                cellSize: ['auto', 20],
                monthLabel: {
                    nameMap: 'cn',
                },
                dayLabel: {
                    nameMap: 'cn'
                }
            }],

        series: [{
            type: 'heatmap',
            coordinateSystem: 'calendar',
            calendarIndex: 0,
            data: getVirtulData1(startDate, endDate)
        }]

    };


    option1 = {
        title: {
            text: '文章阅读量分布',
            /*subtext: '纯属虚构',*/
            x: 'center',
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            // orient: 'vertical',
            // top: 'middle',
            bottom: 5,
            left: 'center',
            data: ['1k-', '1k+', '2k+', '1w+']
        },
        series: [
            {
                name: '阅读分布',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                /*   data:[
                       {value:335, name:'1k+'},
                       {value:310, name:'100+'},
                       {value:234, name:'200+'},
                       {value:135, name:'500+'},
                       {value:1548, name:'50+'}
                   ],*/
                data: levelVos,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };


    chart.setOption(option);
    bing.setOption(option1);

    window.addEventListener('resize', function () {
        chart.resize();
        bing.resize();
    });

    var host = [[${rootPath}]];
    var userId = '[[${setInfo.userId}]]';

    var currentUser = [[${session.user}]];
    var currentId = '';
    if (currentUser != null) {
        currentId = currentUser.userId;
    }

    function rssFn(rssHost, author) {
        if (currentId == "") {
            layer.msg('请登录');
            return false;
        }
        if (currentId == author) {
            layer.msg("不能订阅自己的主题");
            return false;
        }
        if (rssHost == '') {
            return false;
        } else {
            $.post(rssHost, {}, function (data) {
                if (data.code == 200) {
                    layer.msg("订阅成功");
                } else {
                    layer.msg("订阅失败");
                }
            });
        }

    }


    layui.use('flow', function () {
        var flow = layui.flow;
        var pageCount = 0;
        flow.load({
            elem: '#ebook-list', //流加载容器
            scrollElem: '#ebook-list', //滚动条所在元素，一般不用填，此处只是演示需要。
            isAuto: false,
            isLazyimg: true,
            done: function (page, next) { //加载下一页

                //模拟插入
                setTimeout(function () {
                    var lis = [];
                    $.ajax({
                        type: 'GET',
                        url: "../subject/subjects/" + userId,
                        dataType: "json",
                        data: {
                            "pageNum": page,
                            "pageSize": 6
                        },
                        success: function (result) {
                            if (result.code == 200) {
                                pageCount = result.data.pages;
                                $.each(result.data, function (index, simple) {
                                    var viewNum = simple.cmsArticle == null ? 0 : simple.cmsArticle.viewNum;
                                    var commentNum = simple.cmsArticle == null ? 0 : simple.cmsArticle.commentNum;
                                    var likeNum = simple.cmsArticle == null ? 0 : simple.cmsArticle.likeNum;
                                    var authorId = simple.ucenterUser.userId + '';
                                    var sub = "订阅本书";
                                    var rssHost = "";
                                    if (simple.rss) {
                                        sub = "已订阅";
                                    } else {
                                        rssHost = "'" + host + "/subject/rss/" + simple.subjectId + "'";
                                    }
                                    lis.push(' <li class="archive-item" style="display: block;height: 145px; border-bottom: 1px solid #eff2f5">\n' +
                                        '                        <a href="#" title="标题">\n' +
                                        '                            <div class="covercon">\n' +
                                        '                                <img src="' + simple.cover + '" class="cover imgloadinglater" style="display: block;">\n' +
                                        '                            </div>\n' +
                                        '                        </a>\n' +
                                        '                        <div class="archive-text">\n' +
                                        '                            <div class="archive-detail">\n' +
                                        '                                <h3><a href="../article/list/' + simple.subjectId + '/' + simple.subjectTitle + '" title="文章标题">' + simple.subjectTitle + '</a></h3>\n' +
                                        '                                <p>' + simple.subjectDes + '</p>\n' +
                                        '                                <div class="archive-info clearfix"\n' +
                                        '                                     style="margin-top: 10px; overflow: hidden;white-space: nowrap; display: flex">\n' +
                                        '                                    <ul style="padding: 0;">\n' +
                                        '                                        <li class="list-user">\n' +
                                        '                                            <a href="' + host + '/user/' + authorId + '" target="_blank">\n' +
                                        '                                                <img src="' + simple.ucenterUser.avatar + '">\n' +
                                        '                                                <span>' + simple.ucenterUser.nickName + '</span>\n' +
                                        '                                            </a>\n' +
                                        '                                        </li>\n' +
                                        '                                    </ul>\n' +
                                        '                                </div>\n' +
                                        '                                <div class="archive-info clearfix"\n' +
                                        '                                     style="margin-top: 10px; overflow: hidden;white-space: nowrap; display: flex">' +
                                        '<ul style="padding: 0;"><li class="list-msg"><a href="javascript:void(0)" onclick="rssFn(' + rssHost + ',' + authorId + ');"><span class="layui-btn layui-btn-xs layui-btn-normal">' + sub + '</span></a>' +
                                        '<span aria-hidden="true" style="margin-left: 8px;">已有' + simple.rssNum + '人订阅</span>' +
                                        '                        <span aria-hidden="true" style="margin-left: 5px;"><i class="fa fa-eye fa-fw" title="阅读"></i>' + viewNum + '</span>' +
                                        '                        <span aria-hidden="true"><i class="fa fa-commenting fa-fw" title="回答"></i>' + commentNum + '</span>' +
                                        '                        <span aria-hidden="true"><i class="fa fa-thumbs-o-up fa-fw" title="人气"></i>' + likeNum + '</span></li></ul></div></div></div></li>');
                                    next(lis.join(''), page < pageCount);
                                    lis = [];
                                });
                            }else {
                                next(lis.join(''), page < pageCount);
                            }

                        }
                    });


                    // next(lis.join(''), page < pageCount); //假设总页数为 6
                }, 500);
            }
        });
    });


    layui.use(['util', 'element', 'layer'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var util = layui.util;

        //右下角bar top
        util.fixbar({
            bar1: true,
            click: function (type) {
                console.log(type);
                if (type === 'bar1') {
                    alert('点击了bar1')
                }
            }
        });
    });


</script>
</body>

</html>